<template>
	<view>
		<view class="contentBox">
			<text class="merchantName">Migou</text>
			<view class="scoreBox">
				<text class="scoreBox_title">评分</text>
				<uni-rate class="scoreBox_rate" 
					v-model="rateValue" 
					@change="onChange"
					size="26"
				/>
			</view>
			<view class="textareaBox">
				<textarea placeholder-style="color:#c9c9c9" v-model="evaluate" placeholder="亲,快来点评一下商户吧"/>
			</view>
			<text class="wordsText" :class="{'wordsTextError' : evaluate.length > upperlimit}">{{evaluate.length}}/{{upperlimit}}</text>
			<view class="imgBox">
				<uni-file-picker 
				limit="9" 
				></uni-file-picker>
			</view>
		</view>
		<view class="bottom">
			<button>发布</button>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
			
		},
		methods:{
			onChange(e){
				console.log('rate发生改变:' + JSON.stringify(e))
			}
		},
		data() {
			return{
				rateValue: 5,
				evaluate:'',
				upperlimit:200,
				// imageStyles: {
				// 	width: 100,
				// 	height: 100,
					
				// },
			}
		}
	}
</script>

<style>
.contentBox{position: fixed; top: 0px; bottom: 100px; width: 100%; background-color: #ffffff; border-top: 10px solid #f6f6f6;}
.merchantName{width: 90%; height: 20px; float: left; margin-top: 20px; margin-left: 5%; font-size: 19px; font-weight: bolder; }
.scoreBox{width: 90%; height: 30px; float: left; margin-left: 5%; margin-top: 15px;}
.scoreBox_title{width: auto; height: 30px; line-height: 30px; font-size: 15px; color: #929292; float: left; margin-right: 6px;}
.scoreBox_rate{margin-top:2px;}
.textareaBox{width: 90%; height: 120px; float: left; margin-left: 5%; margin-top: 15px;}
.textareaBox textarea{width: 100%; height: 100%; text-indent: 6px;}
.wordsText{width: fit-content; float: right; margin-right: 5%; height: 20px; line-height: 20px; font-size: 14px; color:#a5a5a5;}
.wordsTextError{color:red;}

.imgBox{width: 90%; height: auto; float: left; margin-left: 5%;}
.bottom{width: 100%; height: 100px; background-color: #fff; position: fixed; bottom: 0px; box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.1);}
.bottom button{width: 90%; height: 50px; margin-top: 15px; float: left; margin-left: 5%; border-radius: 50px; background-color: #50d181; color:#fff; line-height: 50px; font-size: 19px; font-weight: bold;}
</style>